<#include "layout/layout.ftl">
<#include "layout/common/article.ftl">
<@layout type="index" title="${options.blog_title!}" keywords="${options.seo_keywords!}" description="${options.seo_description!}" canonical="${context!}">
<style>
    .home-index{
        position: relative;
        z-index: 1;
    }
    .home-index .card-header-title{
        font-size: 18px !important;
        font-weight: bold !important;
    }

  .home-slider {
  	width: 100%;
  	height: 311px !important;
  }

  .home-slider ul li img{
    height: 311px !important;
    max-height: 311px !important;
  }

  .home-slider .prev,.next {
      background-image: none !important;
  }
  .home-slider .arr svg{
    fill: #4a4a4a !important;
  }


  .home-qrcode .box{
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-bottom: 8px;
  }

  .home-qrcode .home-qrcode-title{
    text-align:center;
    font-size: 18px;
    font-weight: 500;
  }


  .home-index a{
    color: #363636;
  }


  .section{
      padding-top: 0;
  }

  .home-right ul, li {
      margin: 0;
      list-style: none;
  }

  .site-info .content{
      height: 260px;
  }
  .site-info .tongji_gzh{
      margin: 0 auto;
      display: flow-root;
  }
  .site-info .tongji_gzh i {
      float: left;
      width: 50%;
      display: block;
      font-size: 13px;
      font-style: normal;
      text-align: center;
  }
  .site-info .tongji_gzh img {
      border: 0;
      display: block;
      margin: auto;
      width: 90%;
  }

  .article-content{
      width: 100%;
  }
  .article-content .article-content-left {
      float: left;
  }
  .article-content .article-content-right {
      float: left;
  }
  .home-index .pagination{
      margin-top: 10px;
  }

</style>

<div class="columns home-index">
    <div class="column">
      <div class="card" >
        <div class="card-content">
          <div id="hwslider" class="hwslider home-slider">
              <ul>
                  <@linkTag method="listTeams">
                      <#list teams as item>
                          <#if item.team?? && item.team?contains('首页轮播图') >
                              <#list item.links?sort_by('priority')?reverse  as link>
                                  <li>
                                      <a href="${link.url!}" target="_blank" rel="external" title="${link.name!}">
                                          <img src="${link.logo!}" alt="${link.name!}">
                                      </a>
                                  </li>
                              </#list>
                          </#if>
                      </#list>
                  </@linkTag>
              </ul>
          </div>
        </div>
      </div>


            <#if posts?? && posts.getTotalElements() gt 0>
                <#list posts.content as post>
                    <#if post_index == 0>
                        <div class="card home-article article-list">
                            <header class="card-header">
                                <p class="card-header-title" >
                                    最新文章
                                </p>
                            </header>
                            <div class="card-content article">
                                    <h2 class="title is-size-3 is-size-4-mobile has-text-weight-normal card-header-title">
                                        <a class="level is-marginless" href="${post.fullPath!}">${post.title!}</a>
                                    </h2>
                                    <div class="level article-meta is-size-7 is-uppercase is-mobile">
                                        <div class="level-left">
                                            <#if post.categories?? && post.categories?size gt 0>
                                                <div class="level-item buttons are-small">
                                                    <#list post.categories as category>
                                                        <a class="button is-primary is-outlined" href="${category.fullPath!}">${category.name!}</a>&nbsp;
                                                    </#list>
                                                </div>
                                            </#if>
                                        </div>
                                    </div>

                                    <p class="content">
                                        <a class="level is-marginless" href="${post.fullPath!}">${post.summary!}</a>
                                    </p>

                                    <div class="level level-left article-meta is-size-7 is-uppercase is-overflow-x-auto">
                                        <time class="has-text-grey" datetime="${post.createTime!}"><i class="fas fa-calendar mr-2"></i>&nbsp;&nbsp;${post.createTime?string('yyyy-MM-dd HH:mm:ss')}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</time>
                                        <span class="has-text-grey"><i class="fas fa-eye mr-2"></i>&nbsp;&nbsp;${post.visits!}次浏览&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span class="has-text-grey"><i class="fas fa-comments mr-2"></i>&nbsp;&nbsp;${post.commentCount}次留言</span>
                                    </div>
                            </div>
                        </div>
                    <#else>
                        <div class="card article-list" >
                            <div class="card-content article">
                                <h2 class="title is-size-3 is-size-4-mobile has-text-weight-normal card-header-title">
                                    <a class="level is-marginless" href="${post.fullPath!}">${post.title!}</a>
                                </h2>
                                <div class="level article-meta is-size-7 is-uppercase is-mobile">
                                    <div class="level-left">
                                        <#if post.categories?? && post.categories?size gt 0>
                                            <div class="level-item buttons are-small">
                                                <#list post.categories as category>
                                                    <a class="button is-primary is-outlined" href="${category.fullPath!}">${category.name!}</a>&nbsp;
                                                </#list>
                                            </div>
                                        </#if>
                                    </div>
                                </div>

                                <p class="content">
                                    <a class="level is-marginless" href="${post.fullPath!}">${post.summary!}</a>
                                </p>

                                <div class="level level-left article-meta is-size-7 is-uppercase is-overflow-x-auto">
                                    <time class="has-text-grey" datetime="${post.createTime!}"><i class="fas fa-calendar mr-2"></i>&nbsp;&nbsp;${post.createTime?string('yyyy-MM-dd HH:mm:ss')}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</time>
                                    <span class="has-text-grey"><i class="fas fa-eye mr-2"></i>&nbsp;&nbsp;${post.visits!}次浏览&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <span class="has-text-grey"><i class="fas fa-comments mr-2"></i>&nbsp;&nbsp;${post.commentCount}次留言</span>
                                </div>
                            </div>
                        </div>
                    </#if>

                </#list>

                <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                    <@paginationTag method="index" page="${posts.number}" total="${posts.totalPages}" display="3">
                        <ul class="pagination-list is-hidden-mobile">
                            <#list pagination.rainbowPages as number>
                                <#if number.isCurrent>
                                    <li><a class="pagination-link is-current" href="${number.fullPath!}">${number.page!}</a></li>
                                <#else>
                                    <li><a class="pagination-link has-text-black-ter" href="${number.fullPath!}">${number.page!}</a></li>
                                </#if>
                            </#list>
                        </ul>
                    </@paginationTag>
                </nav>
            </#if>
 </div>

  <div class="column is-one-quarter home-right">

      <div class="card site-info" >
          <header class="card-header">
              <p class="card-header-title">
                  站点信息
              </p>
          </header>
          <div class="card-content">
              <div class="content">
                  <ul>
                      <li><b>技术文章</b>：<@postTag method="count">${count!0}篇</@postTag>
                      <li><b>评论数量</b>：<@commentTag method="count">${count!0}</@commentTag>
                      <li><b>网站地图</b>：<a href="${sitemap_xml_url!}" target="_blank">XML网站地图</a></li>
                      <li><b>订阅内容</b>：<a href="${rss_url!}" target="_blank">RSS 订阅</a></li>
                      <li><b>扫码关注</b>：</li>
                      <li class="tongji_gzh">
                          <i><img src="${settings.CourseQRCode!}" alt="微信二维码">微信扫描加群</i>
                          <i><img src="${settings.BossQRCode!}" alt="微信公众号">订阅公众号</i>
                      </li>
                  </ul>
              </div>
          </div>
      </div>

      <div class="card" >
          <header class="card-header">
              <p class="card-header-title">
                  最新评论
              </p>
          </header>
          <div class="card-content">
              <div class="content field is-grouped is-grouped-multiline">
                  <@commentTag method="latest" top="5">
                      <#if comments?? && comments.getTotalElements() gt 0>
                          <#list comments.content as comment>
                              <article class="media" style="width: 100%;">
                                  <div class="media-content">
                                      <div class="content">
                                          <div><time class="has-text-grey is-size-7 is-uppercase" datetime="${comment.createTime!}">${comment.createTime?string('yyyy-MM-dd')}</time></div>
                                          ${comment.author!} : <a href="${comment.post.fullPath!}#comment-wrapper" class="title has-link-black-ter is-size-6 has-text-weight-normal">${comment.content!}</a>
                                      </div>
                                  </div>
                              </article>
                          </#list>
                      </#if>
                  </@commentTag>
              </div>
          </div>
      </div>

      <div class="card" >
          <header class="card-header">
              <p class="card-header-title">
                  标签云
              </p>
          </header>
          <div class="card-content">
              <div class="content field is-grouped is-grouped-multiline">
                  <@tagTag method="list">
                      <#list tags as tag>
                          <div class="control">
                              <a class="tags has-addons" href="${tag.fullPath!}">
                                  <span class="tag">${tag.name}</span>
                                  <span class="tag is-grey">${tag.postCount!}</span>
                              </a>
                          </div>
                      </#list>
                  </@tagTag>
              </div>
          </div>
      </div>



      <div class="card " >
          <header class="card-header">
              <p class="card-header-title">
                  友情链接
              </p>
          </header>
          <div class="card-content">
              <div class="content">
                  <ul>
                      <@linkTag method="listTeams">
                          <#list teams as item>
                              <#if item.team?? && item.team?contains('友情链接') >
                                  <#list item.links?sort_by('priority')?reverse  as link>
                                      <li>
                                          <#if link.description?? && !link.description?contains('no-display') >
                                              <#if link.description?? && !link.description?contains('nofollow') >
                                                  <a href="${link.url}" target="_blank" rel="external" >${link.name}</a>
                                              <#else>
                                                  <a href="${link.url}" target="_blank" rel="nofollow external" >${link.name}</a>
                                              </#if>
                                          </#if>
                                      </li>
                                  </#list>
                              </#if>
                          </#list>
                      </@linkTag>
                  </ul>
              </div>
          </div>
      </div>

  </div>
</div>

</@layout>
